<template>
    <view class="search">
        <view class="searchTop">
            <!-- <input type="text" v-model="name" @change='search'> -->
            <u--input type="text" placeholder="请输入商家名称" border="surround" v-model="name" @change='search'></u--input>
            <button @click="clearsearch">取消</button>
        </view>
        <view class="shophome">
            <dl v-for="(item,index) in list" :key="index">
                <h5>{{item.shopname}}</h5>
                <dt>
                    <image :src="item.logo" />
                </dt>
                <dd>
                    {{item.content}}
                </dd>
                <dd> 	  <custom-tab-bar direction="+" :show-icon="" :selected="" @onTabItemTap="" />
                    ￥{{item.fee}}元
                </dd>
            </dl>
        </view>
    </view>
</template>


<script>
    export default {
        data() {
            return {
                name: "",
                list: [],
                middlelist: [],
            }
        },
        onLoad() {
            uni.request({
                url: "http://10.31.67.9:8002/admin/shoplists",
                method: "GET",
                success: (res) => {
                    this.list = res.data
                    this.middlelist = res.data
                },
                fail: (error) => {
                    console.log(error);
                }
            })
        },
        methods: {
            search(e) {
                if (e) {
                    this.list = this.list.filter(item =>
                        item.shopname.includes(e)
                    )

                } else {
                    this.list = this.middlelist
                }
            },
            clearsearch() {
                this.list = this.middlelist
            }
        }
    }
</script>


<style lang="scss">
    .search {
        width: 100%;
        height: 100%;

        .searchTop {
            width: 90%;
            height: 80rpx;
            padding-left: 5%;
            display: flex;

            button {
                width: 20%;
                height: 60rpx;
                margin: 10rpx 5%;
                text-align: center;
                line-height: 60rpx;
                background: #1ba035;
                color: white;
                font-size: 16px
            }
        }

        .shophome {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;

            dl {
                width: 90%;
                height: 300rpx;
                border: 1px solid skyblue;
                margin: 2% 5%;

                h5 {
                    width: 100%;
                    height: 50rpx;
                }

                dt {
                    width: 40%;
                    height: 200rpx;
                    float: left;

                    image {
                        width: 80%;
                        height: 80%;
                        margin-left: 10%;
                    }
                }

                dd {
                    width: 50%;
                    height: 50rpx;
                    float: left;
                    margin-left: 5%;
                }
            }
        }
    }
</style>